

<template>
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="visible" custom-class="dialog_default">

    <div class="flex_row_center mg_b2">
      <el-input class="form_input_default" :placeholder="$tt('tip_please_car_code')" v-model="searchCode" clearable></el-input><el-button
        class="mg_l2" type="primary" @click="clickSearch">{{ $tt('label_tms_query') }}</el-button>
    </div>
    <el-radio-group v-model="select" class="w_fill">
      <ex_super_table v-bind="table" height="400" autoPage ref="SuperTable" @row-click="rowClick">
        <template v-slot:radio="{ row }">
          <el-radio style="margin-left: 10px;" :label="row" :key="row.id">{{ "" }}</el-radio>
        </template>
      </ex_super_table>
    </el-radio-group>
    <span slot="footer" class="dialog_footer">
      <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
      <el-button type="primary" @click="submit">{{ $tt('label_submit') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'vehicle_listSelect',
  data() {
    return {
      title: null,
      extraData: null,
      searchCode: "",
      select: null,

      visible: false,

      loading: false,
      table: {
        url: "/tms-api/base/TmsVehicleInfoRpc/selectEnableByPage.json",
        urlParams: (params) => {
          return Object.assign({
            supplierId: this.extraData && this.extraData.supplierId
          }, params)
        },
        model: [
          { slot: 'radio', width: 80 },
          { key: 'vehicleNo', label: 'label_tms_vehicle_license_number', 'min-width': 120, 'show-overflow-tooltip': true, },
          { key: 'vehicleType', label: 'label_tms_vehicle_vehicle_model', 'min-width': 100, 'show-overflow-tooltip': true, },
          { key: 'brandType', label: 'label_tms_vehicle_brand_type', 'min-width': 100, 'show-overflow-tooltip': true, },

          { key: 'bindDriverName', label: 'label_tms_vehicle_driver', 'min-width': 100, 'show-overflow-tooltip': true, },
          { key: 'gmtCreate', label: 'label_create_time', 'min-width': 120, formatter: (r, c, v, i) => this.$dateFormat(v) },


        ],

      },

    }
  },
  props: {


  },
  methods: {
    clickSearch() {
      this.$refs.SuperTable.loadData({ vehicleNo: this.searchCode })
    },
    rowClick(row) {

      this.select = row
    },
    show(params) {

      this.title = params.title
      this.extraData = params.extraData
      this.select = null
      this.visible = true
      this.searchCode = ""

      this.$nextTick(() => {
        this.$refs.SuperTable.loadData()
      })
    },
    hide() {
      this.visible = false
    },
    submit() {
      if (!this.select) {
        return this.$message.error(this.$tt("tip_please_select_car"))
      }

      this.$emit('afterSubmit', { select: this.select, extraData: this.extraData },)
    },

  }
}
</script>
